Element Plus主题介绍

一、Element Plus 主题特点

1. 高度可定制，包括颜色、字体和布局，可根据项目需求调整，打造独特界面。
2. 简洁美观，遵循简洁现代原则，组件样式大方，色彩搭配和字体选择合理。
3. 响应式设计，自动适应不同屏幕尺寸和设备类型，确保良好视觉效果和用户体验。
4. 一致性与兼容性强，在组件库中保持统一风格，与 Vue.js 框架兼容，可与第三方库和插件配合。

二、应用场景

1. 企业级应用，提升品牌形象，增强信任感，可根据品牌颜色定制，确保不同设备良好运行。
2. 电商平台，打造美观易用界面，突出重要功能，确保不同设备顺利购物。
3. 管理系统，满足简洁高效需求，定制主题符合工作流程和习惯，提高效率，支持移动设备使用。
4. 移动应用开发，合理定制和响应式设计可在移动设备上呈现良好效果。

三、组件目录

Element Plus组件

1. Basic 基础组件
   • Button 按钮 https://element-plus.org/zh-CN/component/button.html
   • Border 边框 https://element-plus.org/zh-CN/component/border.html
   • Color 色彩 https://element-plus.org/zh-CN/component/color.html
   • Container 布局容器 https://element-plus.org/zh-CN/component/container.html
   • Icon 图标 https://element-plus.org/zh-CN/component/icon.html
   • Layout 布局 https://element-plus.org/zh-CN/component/layout.html
   • Link 链接 https://element-plus.org/zh-CN/component/link.html
   • Text 文本 https://element-plus.org/zh-CN/component/text.html
   • Scrollbar 滚动条 https://element-plus.org/zh-CN/component/scrollbar.html
   • Space 间距 https://element-plus.org/zh-CN/component/space.html
   • Typography 排版 https://element-plus.org/zh-CN/component/typography.html
2. 配置组件
   • Config Provider 全局配置 https://element-plus.org/zh-CN/component/config-provider.html
3. Form 表单组件
   • Autocomplete 自动补全输入框 https://element-plus.org/zh-CN/component/autocomplete.html
   • Cascader 级联选择器 https://element-plus.org/zh-CN/component/cascader.html
   • Checkbox 多选框 https://element-plus.org/zh-CN/component/cascader.html
   • Color Picker 取色器 https://element-plus.org/zh-CN/component/color-picker.html
   • Date Picker 日期选择器 https://element-plus.org/zh-CN/component/date-picker.html
   • DateTime Picker 日期时间选择器 https://element-plus.org/zh-CN/component/datetime-picker.html
   • Form 表单 https://element-plus.org/zh-CN/component/form.html
   • Input 输入框 https://element-plus.org/zh-CN/component/input.html
   • Input Number 数字输入框 https://element-plus.org/zh-CN/component/input-number.html
   • Mention 提及 https://element-plus.org/zh-CN/component/mention.html
   • Radio 单选框 https://element-plus.org/zh-CN/component/radio.html
   • Rate 评分 https://element-plus.org/zh-CN/component/rate.html
   • Select 选择器 https://element-plus.org/zh-CN/component/select.html
   • Virtualized Select 虚拟化选择器 https://element-plus.org/zh-CN/component/select-v2.html
   • Slider 滑块 https://element-plus.org/zh-CN/component/slider.html
   • Switch 开关 https://element-plus.org/zh-CN/component/switch.html
   • Time Picker 时间选择器 https://element-plus.org/zh-CN/component/time-picker.html
   • Time Select 时间选择 https://element-plus.org/zh-CN/component/time-select.html
   • Transfer 穿梭框 https://element-plus.org/zh-CN/component/transfer.html
   • TreeSelect 树形选择 https://element-plus.org/zh-CN/component/tree-select.html
   • Upload 上传 https://element-plus.org/zh-CN/component/upload.html
4. Data 数据展示
   • Avatar 头像 https://element-plus.org/zh-CN/component/avatar.html
   • Badge 徽章 https://element-plus.org/zh-CN/component/badge.html
   • Calendar 日历 https://element-plus.org/zh-CN/component/calendar.html
   • Card 卡片 https://element-plus.org/zh-CN/component/card.html
   • Carousel 走马灯 https://element-plus.org/zh-CN/component/carousel.html
   • Collapse 折叠面板 https://element-plus.org/zh-CN/component/collapse.html
   • Descriptions 描述列表 https://element-plus.org/zh-CN/component/descriptions.html
   • Empty 空状态 https://element-plus.org/zh-CN/component/empty.html
   • Image 图片 https://element-plus.org/zh-CN/component/image.html
   • Infinite Scroll 无限滚动 https://element-plus.org/zh-CN/component/infinite-scroll.html
   • Pagination 分页 https://element-plus.org/zh-CN/component/pagination.html
   • Progress 进度条 https://element-plus.org/zh-CN/component/progress.html
   • Result 结果 https://element-plus.org/zh-CN/component/result.html
   • Skeleton 骨架屏 https://element-plus.org/zh-CN/component/skeleton.html
   • Table 表格 https://element-plus.org/zh-CN/component/table.html
   • Virtualized Table 虚拟化表格 https://element-plus.org/zh-CN/component/table-v2.html
   • Tag 标签 https://element-plus.org/zh-CN/component/tag.html
   • Timeline 时间线 https://element-plus.org/zh-CN/component/timeline.html
   • Tour 漫游式引导 https://element-plus.org/zh-CN/component/tour.html
   • Tree 树形控件 https://element-plus.org/zh-CN/component/tree.html
   • Virtualized Tree 虚拟化树形控件 https://element-plus.org/zh-CN/component/tree-v2.html
   • Statistic 统计组件 https://element-plus.org/zh-CN/component/statistic.html
   • Segmented 分段控制器 https://element-plus.org/zh-CN/component/segmented.html
5. Navigation 导航
   • Affix 固钉 https://element-plus.org/zh-CN/component/affix.html
   • Anchor 锚点 https://element-plus.org/zh-CN/component/anchor.html
   • Backtop 回到顶部 https://element-plus.org/zh-CN/component/backtop.html
   • Breadcrumb 面包屑 https://element-plus.org/zh-CN/component/breadcrumb.html
   • Dropdown 下拉菜单 https://element-plus.org/zh-CN/component/dropdown.html
   • Menu 菜单 https://element-plus.org/zh-CN/component/menu.html
   • Page Header 页头 https://element-plus.org/zh-CN/component/page-header.html
   • Steps 步骤条 https://element-plus.org/zh-CN/component/steps.html
   • Tabs 标签页 https://element-plus.org/zh-CN/component/tabs.html
6. Feedback 反馈组件
   • Alert 提示 https://element-plus.org/zh-CN/component/alert.html
   • Dialog 对话框 https://element-plus.org/zh-CN/component/dialog.html
   • Drawer 抽屉 https://element-plus.org/zh-CN/component/drawer.html
   • Loading 加载 https://element-plus.org/zh-CN/component/loading.html
   • Message 消息提示 https://element-plus.org/zh-CN/component/message.html
   • Message Box 消息弹出框 https://element-plus.org/zh-CN/component/message-box.html
   • Notification 通知 https://element-plus.org/zh-CN/component/notification.html
   • Popconfirm 气泡确认框 https://element-plus.org/zh-CN/component/popconfirm.html
   • Popover 弹出框 https://element-plus.org/zh-CN/component/popover.html
   • Tooltip 文字提示 https://element-plus.org/zh-CN/component/tooltip.html
7. Others 其他
   • Divider 分割线 https://element-plus.org/zh-CN/component/divider.html
   • Watermark 水印 https://element-plus.org/zh-CN/component/watermark.html

Tailwind CSS组件

1. Marketing
   • Page Section 页面部分
   • Hero Sections 英雄板块 https://tailwindui.com/components/marketing/sections/heroes
   • Feature Sections 特色板块 https://tailwindui.com/components/marketing/sections/feature-sections
   • CTA Sections CTA板块 https://tailwindui.com/components/marketing/sections/cta-sections
   • Bento Grids 便当网格 https://tailwindui.com/components/marketing/sections/bento-grids
   • Pricing Sections 价格板块 https://tailwindui.com/components/marketing/sections/pricing
   • Header Sections 头部板块 https://tailwindui.com/components/marketing/sections/header
   • Newsletter Sections 新闻通讯板块 https://tailwindui.com/components/marketing/sections/newsletter-sections
   • Stats 统计数据 https://tailwindui.com/components/marketing/sections/stats-sections
   • Testimonials 客户评价 https://tailwindui.com/components/marketing/sections/testimonials
   • Blog Sections 博客板块 https://tailwindui.com/components/marketing/sections/blog-sections
   • Contact Sections 接触板块 https://tailwindui.com/components/marketing/sections/contact-sections
   • Team Sections 团队板块 https://tailwindui.com/components/marketing/sections/team-sections
   • Content Sections 内容板块 https://tailwindui.com/components/marketing/sections/content-sections
   • Logo Clouds 标志云 https://tailwindui.com/components/marketing/sections/logo-clouds
   • FAQs 常见问题解答 https://tailwindui.com/components/marketing/sections/faq-sections
   • Footers 页脚 https://tailwindui.com/components/marketing/sections/footers
   • Elements 元件
   • Headers 页眉 https://tailwindui.com/components/marketing/elements/headers
   • Flyout Menus 弹出菜单 https://tailwindui.com/components/marketing/elements/flyout-menus
   • Banners 横幅广告 https://tailwindui.com/components/marketing/elements/banners
   • Feedback 反馈
   • 404 Pages 404页面 https://tailwindui.com/components/marketing/feedback/404-pages
   • Page Examples 页面示例
   • Landing Pages 登录页面 https://tailwindui.com/components/marketing/page-examples/landing-pages
   • Pricing Pages 定价页面 https://tailwindui.com/components/marketing/page-examples/pricing-pages
   • About Pages 关于页面 https://tailwindui.com/components/marketing/page-examples/about-pages
2. Application UI
   • Application Shells 应用程序外观
   • Stacked Layouts 堆叠布局 https://tailwindui.com/components/application-ui/application-shells/stacked
   • Sidebar Layouts 提要字段版面配置 https://tailwindui.com/components/application-ui/application-shells/sidebar
   • Multi-Column Layouts 多栏布局 https://tailwindui.com/components/application-ui/application-shells/multi-column
   • Headings 标题
   • Page Headings 页面标题 https://tailwindui.com/components/application-ui/headings/page-headings
   • Card Headings 卡片标题 https://tailwindui.com/components/application-ui/headings/card-headings
   • Section Headings 章节标题 https://tailwindui.com/components/application-ui/headings/section-headings
   • Data Display 数据显示
   • Description Lists 描述列表 https://tailwindui.com/components/application-ui/data-display/description-lists
   • Stats 统计数据 https://tailwindui.com/components/application-ui/data-display/stats
   • Calendars 日历 https://tailwindui.com/components/application-ui/data-display/calendars
   • Lists 列出
   • Stacked Lists 堆叠列表 https://tailwindui.com/components/application-ui/lists/stacked-lists
   • Tables 表 https://tailwindui.com/components/application-ui/lists/tables
   • Grid Lists 网格列出 https://tailwindui.com/components/application-ui/lists/grid-lists
   • Feeds 提要 https://tailwindui.com/components/application-ui/lists/feeds
   • Forms 形式
   • Form Layouts 表单布局 https://tailwindui.com/components/application-ui/forms/form-layouts
   • Input Groups 输入组 https://tailwindui.com/components/application-ui/forms/input-groups
   • Select Menus 选择菜单 https://tailwindui.com/components/application-ui/forms/select-menus
   • Sign-in and Registration 登录和注册 https://tailwindui.com/components/application-ui/forms/sign-in-forms
   • Text areas 文本区域 https://tailwindui.com/components/application-ui/forms/textareas
   • Radio Groups 无线电群组 https://tailwindui.com/components/application-ui/forms/radio-groups
   • Checkboxes 复选框 https://tailwindui.com/components/application-ui/forms/checkboxes
   • Toggles 切换 https://tailwindui.com/components/application-ui/forms/toggles
   • Action Panels 行动小组 https://tailwindui.com/components/application-ui/forms/action-panels
   • Comboboxes 组合框 https://tailwindui.com/components/application-ui/forms/comboboxes
   • Feedback 反馈
   • Alerts 警报 https://tailwindui.com/components/application-ui/feedback/alerts
   • Empty States 空态 https://tailwindui.com/components/application-ui/feedback/empty-states
   • Navigation 导航
   • Navbars 导航栏组件 https://tailwindui.com/components/application-ui/navigation/navbars
   • Pagination 分页 https://tailwindui.com/components/application-ui/navigation/pagination
   • Tabs 选项卡 https://tailwindui.com/components/application-ui/navigation/tabs
   • Vertical Navigation 垂直导航 https://tailwindui.com/components/application-ui/navigation/vertical-navigation
   • Sidebar Navigation 侧边栏导航 https://tailwindui.com/components/application-ui/navigation/sidebar-navigation
   • Breadcrumbs 面包屑 https://tailwindui.com/components/application-ui/navigation/breadcrumbs
   • Progress Bars 进度条 https://tailwindui.com/components/application-ui/navigation/progress-bars
   • Command Palettes 命令选项板 https://tailwindui.com/components/application-ui/navigation/command-palettes
   • Overlays 覆盖
   • Modal Dialogs 模态对话框 https://tailwindui.com/components/application-ui/overlays/modal-dialogs
   • Drawers 抽屉 https://tailwindui.com/components/application-ui/overlays/drawers
   • Notifications 通知 https://tailwindui.com/components/application-ui/overlays/notifications
   • Elements 元件
   • Avatars 头像 https://tailwindui.com/components/application-ui/elements/avatars
   • Badges 徽章 https://tailwindui.com/components/application-ui/elements/badges
   • Dropdowns 下拉菜单 https://tailwindui.com/components/application-ui/elements/dropdowns
   • Buttons 按钮 https://tailwindui.com/components/application-ui/elements/buttons
   • Button Groups 按钮组 https://tailwindui.com/components/application-ui/elements/button-groups
   • Layout 布局
   • Containers 容器 https://tailwindui.com/components/application-ui/layout/containers
   • Cards 卡 https://tailwindui.com/components/application-ui/layout/cards
   • List containers 列表容器 https://tailwindui.com/components/application-ui/layout/list-containers
   • Media Objects 媒体对象 https://tailwindui.com/components/application-ui/layout/media-objects
   • Dividers 分隔器 https://tailwindui.com/components/application-ui/layout/dividers
   • Page Examples 页面示例
   • Home Screens 主屏幕 https://tailwindui.com/components/application-ui/page-examples/home-screens
   • Detail Screens 细节屏幕 https://tailwindui.com/components/application-ui/page-examples/detail-screens
   • Settings Screens 设置屏面 https://tailwindui.com/components/application-ui/page-examples/settings-screens
3. Ecommerce
   • Components 组件
   • Product Overviews 产品概述 https://tailwindui.com/components/ecommerce/components/product-overviews
   • Product Lists 产品清单 https://tailwindui.com/components/ecommerce/components/product-lists
   • Category Previews 类别预览 https://tailwindui.com/components/ecommerce/components/category-previews
   • Shopping Carts 购物车 https://tailwindui.com/components/ecommerce/components/shopping-carts
   • Category Filters 类别过滤器 https://tailwindui.com/components/ecommerce/components/category-filters
   • Product Quickviews 产品快速浏览 https://tailwindui.com/components/ecommerce/components/product-quickviews
   • Product Features 产品功能 https://tailwindui.com/components/ecommerce/components/product-features
   • Store Navigation 存储导航 https://tailwindui.com/components/ecommerce/components/store-navigation
   • Promo Sections 促销部分 https://tailwindui.com/components/ecommerce/components/promo-sections
   • Checkout Forms 结账表格 https://tailwindui.com/components/ecommerce/components/checkout-forms
   • Reviews 评论 https://tailwindui.com/components/ecommerce/components/reviews
   • Order Summaries 订单汇总 https://tailwindui.com/components/ecommerce/components/order-summaries
   • Order History 订单历史 https://tailwindui.com/components/ecommerce/components/order-history
   • Incentives 激励 https://tailwindui.com/components/ecommerce/components/incentives
   • Page Examples 页面示例
   • Storefront Pages 店面页面 https://tailwindui.com/components/ecommerce/page-examples/storefront-pages
   • Product Pages 产品页面 https://tailwindui.com/components/ecommerce/page-examples/product-pages
   • Category Pages 类别页面 https://tailwindui.com/components/ecommerce/page-examples/category-pages
   • Shopping Cart Pages 购物车页面 https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages
   • Checkout Pages 结账页面 https://tailwindui.com/components/ecommerce/page-examples/checkout-pages
   • Order Detail Pages 订单详细信息页面 https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages
   • Order History Pages 订单历史页面 https://tailwindui.com/components/ecommerce/page-examples/order-history-pages

ScriptEcho整理组件集合

1. 2D/3D/XR组件
   • @egjs/view3d组件 https://naver.github.io/egjs-view3d/docs
   • 3Dmol.js https://3dmol.org/doc/
   • potree组件 https://github.com/potree/potree/
   • three.js组件 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
   • pixijs https://pixijs.com/8.x/tutorials/getting-started#1
   • two.js https://two.js.org/examples/#official-examples
   • Matter.js https://github.com/liabru/matter-js/tree/master/examples
   • PlayCanvasEngine https://developer.playcanvas.com/user-manual/
   • vue-3d-model组件 https://gitee.com/happinessllw/vue-3d-model
2. AntV组件
   • antvs2组件 https://s2.antv.antgroup.com/manual/introduction
   • antvx6组件 https://x6.antv.vision/zh/docs/tutorial/about
   • antvl7组件 https://www.yuque.com/antv/l7/wyb66y
   • antvg6组件 https://www.yuque.com/antv/g6/intro
   • antvg2组件 https://www.yuque.com/antv/g2-docs/get-started
   • antvf2组件 https://www.yuque.com/antv/f2/grammar
   • antv/f6组件 https://f6.antv.vision/zh/docs/manual/introduction/
3. 地图组件
   • https://ivan-94.github.io/react-bdmap/#/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
   • inmap https://fengluhome.github.io/inmap-doc/#/docs/v2/introduce
4. 动画组件
   • AnimeJS组件 https://animejs.com/documentation/#cssSelector
   • vue3-lottie组件 https://gitee.com/xilong008/vue-lottie/#wapper-of-bodymovinjs
   • p5.js https://p5js.org/tutorials/
5. 企业协作组件
   • @xpyjs/gantt组件 https://xpyjs.github.io/gantt/docs/root.html
   • gantt-schedule-timeline-calendar组件 https://gitee.com/endfalse/gantt-schedule-timeline-calendar#install
6. 音视频组件
   • jessibuca.js组件 https://jessibuca.com/document.html
   • vidstack/vue组件 https://www.vidstack.io/docs/player/getting-started/installation?styling=default-layout&provider=video
   • vue-record-audio组件 https://www.npmjs.com/package/vue-record-audio
7. 在线文档组件
   • CodeMirror组件 https://codemirror.net/docs/guide/
   • drauu组件 https://github.com/antfu/drauu
   • mind-elixir组件 https://mind-elixir.com/docs/getting-started/quick-start
   • tinymce组件 https://www.tiny.cloud/docs/tinymce/latest/basic-setup/
   • tiptap组件 https://tiptap.dev/docs/editor/getting-started/install
   • Univer组件 https://univer.ai/zh-CN/guides/sheet/getting-started/quickstart
   • vue-office组件 https://501351981.github.io/vue-office/examples/docs/config/
   • WangEditor组件 https://www.wangeditor.com/v5/getting-started.html
   • vue-markdown-it https://freedomevenden.com/projects/vue-markdown-it#usage
8. 拓扑图
   • Cytoscape.js https://js.cytoscape.org/#getting-started
   • neovis.js https://github.com/neo4j-contrib/neovis.js
   • WebCola https://github.com/tgdwyer/WebCola/tree/master/website/examples
9. 图形组件
   • BPMN.js https://bpmn.io/toolkit/bpmn-js/walkthrough/
   • JSXGraph https://jsxgraph.org/wp/docs/index.html
   • LiteGraph.js https://github.com/jagenjo/litegraph.js
   • Rough.js https://roughjs.com/
10. 图形处理
    • OpenCV.js https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html
    • WASM-ImageMagick https://github.com/ImageMagick/ImageMagick
11. 其他
    • uiverse卡片 https://uiverse.io/elements
    • WebSight1 https://docs.websight.io/cms/quick-start/
    • WebSight2 https://docs.websight.io/cms/quick-start/
    • 人工智能组件 https://www.llama.com/docs/how-to-guides/
    • ECharts图表 https://echarts.apache.org/zh/option.html#title